<template>
  <myHeader :crumbs="crumbs"></myHeader>
  <div class="list-main">
    <h1>章节列表</h1>
    <ul>
      <li v-for="(item, index) in chapterData" :key="index">
        <div class="bg"></div>
        <div class="top">
          <div class="num">{{ item.name }}</div>
          <div class="total">{{ item.count }}题</div>
        </div>
        <p>{{ item.note }}</p>
        <a :href="`/#/${route.params.type}/${route.params.subject}/chapter/${item.value}?cn=${item.note}`">开始答题</a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import myHeader from '@/components/header.component.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, getCurrentInstance } from 'vue';
const { $api } = getCurrentInstance().appContext.config.globalProperties;
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const chapterData = ref([])
const crumbs = ref([{
  name: '章节练习',
  url: ''
}])

// 获取章节
const getChapterFn = () => {
  $api.getChapterApi({
    subjectId: route.params.subject
  }).then((res) => {
    if (res.errno === 0) {
      if (res.result) {
        chapterData.value = res.result;
        return false;
      }
      ElMessageBox.confirm('当前科目没有章节练习', '系统提示', {
        showClose: false,
        showCancelButton: false,
        confirmButtonText: '我已知晓'
      }).then(() => {
        router.back()
      }).catch(() => {
        router.back()
      })
      return false;
    }
    ElMessage.error(res.errmsg)
  })
}
getChapterFn()
</script>

<style lang="scss" scoped>
@import '../assets/css/list.css';

</style>